<template>
  <div class="global-icon-kpi-wrap">
    <div class="icon-kpi">
      <div
        :style="{ backgroundColor: config.color }"
        class="icon-wrap"
        v-if="showConfigIcon"
      >
        <i :class="[config.icon]"></i>
      </div>
      <svg-icon v-else :icon-class="iconSvg" />
      <div class="content-wrap">
        <div class="config-value">
          <span v-for="(item, index) in config.value" :key="index"
            ><span v-if="index > 0"> / </span>
            <span>{{ needFormat ? formatNumber(item || 0) : item }}</span>
          </span>

          <span class="suffix" v-if="config.suffix">{{ config.suffix }}</span>
        </div>
        <div class="label">
          <span v-for="(item, index) in config.label" :key="index"
            ><span v-if="index > 0"> / </span>
            <span>{{ item }}</span>
          </span>
        </div>
      </div>
    </div>

    <div class="container-wrap" v-if="showOtherOption">
      <div class="content-wrap-other">
        <div class="label">
          <span>{{ otherConfig.label1 }}</span>
        </div>
        <div class="value">{{ otherConfig.value1 }}</div>
      </div>
      <div class="divided-line"></div>
      <div class="content-wrap-other">
        <div class="label">
          <span>{{ otherConfig.label2 }}</span>
        </div>
        <div class="value">{{ otherConfig.value2 }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatNumber } from "@/utils/util";
export default {
  name: "index",
  props: {
    config: {
      type: Object,
      default: () => ({
        icon: "iconfont icon-zonglan",
        color: "#72c140",
        label: "0",
        value: "总数",
        suffix: "",
      }),
    },
    showConfigIcon: {
      type: Boolean,
      default: true,
    },
    showOtherOption: {
      type: Boolean,
      default: false,
    },
    otherConfig: {
      type: Object,
      default: () => ({
        label1: "",
        value1: "0",
        label2: "",
        value2: "0",
      }),
    },
    iconSvg: {
      type: String,
      default: "",
    },
    needFormat: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    formatNumber(num) {
      return formatNumber(num);
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.global-icon-kpi-wrap {
  padding: 20px;
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
  border-radius: 4px;
  justify-content: space-between;

  .icon-kpi {
    display: flex;
  }

  .icon-wrap {
    height: 56px;
    width: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 4px;

    .iconfont {
      font-size: 24px;
    }
  }

  .content-wrap {
    font-size: 14px;
    margin-left: 16px;
    .label {
      color: rgba(0, 0, 0, 0.45);
    }
    .config-value {
      color: #303133;
      margin-bottom: 8px;
      // font-weight: bold;
      font-size: 24px;

      .suffix {
        color: #303133;
        font-weight: normal;
        margin-left: 4px;
        font-size: 16px;
      }
    }
    .value {
      color: #303133;
      margin-bottom: 8px;
      // font-weight: bold;
      font-size: 24px;

      .suffix {
        color: #303133;
        font-weight: normal;
        margin-left: 4px;
        font-size: 16px;
      }
    }
  }

  .divided-line {
    height: 38px;
    margin: auto;
    border-right: 1px #e9e9e9 solid;
  }

  .container-wrap {
    display: flex;
    .content-wrap-other {
      font-size: 14px;
      margin-left: 20px;
      margin-right: 20px;
      .label {
        color: rgba(0, 0, 0, 0.45);
        margin-bottom: 8px;
      }

      .value {
        color: #303133;
        font-size: 24px;
        text-align: right;
      }
    }
  }
}

::v-deep .svg-icon {
  width: 55px;
  height: 55px;
}
</style>
